<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="" >

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-title" data-rule="required" class="form-control" name="row[title]" type="text">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Manystore_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-manystore_id" data-rule="required" data-source="store_shop/index"  data-params='{"custom[status]":"1"}' class="form-control selectpage" name="row[manystore_id]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Paytype')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-paytype" data-rule="required" class="form-control selectpicker" name="row[paytype]">
                {foreach name="paytypeList" item="vo"}
                <option value="{$key}" {in name="key" value="0"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>
        </div>
    </div>
   <!-- <div class="form-group agent_level">
        <label class="control-label col-xs-12 col-sm-2">{:__('跳转类型')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select class="form-control col-sm-8" name="row[redirect_type]" >
                <option value =1 >跳转到商户主页</option>
                <option value =2 >跳转到卡券列表</option>
                <option value =3 >跳转自定义链接</option>
            </select>
        </div>
    </div>-->
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('跳转类型')}:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-redirect_type" data-rule="required" class="form-control selectpicker" name="row[redirect_type]">
                {foreach name="redirectList" item="vo"}
                <option value="{$key}" {in name="key" value="0"}selected{/in}>{$vo}</option>
                {/foreach}
            </select>
        </div>
    </div>



    <div class="form-group redirect_url"style="display: none;">
        <label class="control-label col-xs-12 col-sm-2">{:__('跳转url')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-redirect_url"  class="form-control" name="row[redirect_url]" type="text">
        </div>
    </div>

    <div class="form-group c-Card_id">
        <label class="control-label col-xs-12 col-sm-2">{:__('Card_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-card_id"  data-source="card/index" data-field="title"  class="form-control selectpage" name="row[card_id]" type="text" value="">
        </div>
    </div>


    <div class="form-group c-turntable_id"style="display: none;" >
        <label class="control-label col-xs-12 col-sm-2">{:__('大转盘')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-turntable_id" data-source="turntable/index" data-field="title"  class="form-control selectpage" name="row[turntable_id]" type="text" value="">
        </div>
    </div>



    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('参与次数')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-scan_times" data-rule="required" class="form-control" name="row[scan_times]" type="number" value="0">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Starttime')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-starttime" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[starttime]" type="text" value="{:date('Y-m-d H:i:s')}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Endtime')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-endtime" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[endtime]" type="text" value="{:date('Y-m-d H:i:s')}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-content" data-rule="required" class="form-control editor" rows="5" name="row[content]" cols="50"></textarea>
        </div>
    </div>
  <!--  <h5 class="page-header"></h5>
   <div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Video_img')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-video_img" data-rule="required" class="form-control" size="50" name="row[video_img]" type="text" value="">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-video_img" class="btn btn-danger faupload" data-input-id="c-video_img" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-video_img"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-video_img" class="btn btn-primary fachoose" data-input-id="c-video_img" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-video_img"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-video_img"></ul>
        </div>
    </div>

    <div class="form-group row">
        <label class="control-label col-xs-12 col-sm-2">{:__('短视频')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-images" data-rule="required" class="form-control" size="50" name="" type="text" value="">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-images" class="btn btn-danger plupload" data-input-id="c-images" data-mimetype="video/mp4,video/x-flv" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="video/mp4,video/x-flv" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-images"></span>
            </div>

            &lt;!&ndash;ul需要添加 data-template和data-name属性，并一一对应且唯一 &ndash;&gt;
            <ul class="row list-inline plupload-preview" id="p-images" data-template="desctpl" data-name="row[video]"></ul>

            &lt;!&ndash;请注意 ul和textarea间不能存在其它任何元素，实际开发中textarea应该添加个hidden进行隐藏&ndash;&gt;
            <textarea name="row[video]" class="form-control hidden" style="margin-top:5px;" ></textarea>

            &lt;!&ndash;这里自定义图片预览的模板 开始&ndash;&gt;
            <script type="text/html" id="desctpl">
                <li class="col-xs-6">

                        <video src="<%=fullurl%>" controls="controls"  style="width:100%;height: 200px"></video>

                    <input type="text" name="row[video][<%=index%>][info]" class="form-control" placeholder="请输入插件描述" value="<%=value?value['info']:''%>"/>
                    <input type="text" name="row[video][<%=index%>][src]" class="form-control"  value="<%=fullurl%>"/>
                    <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
                </li>
            </script>
            &lt;!&ndash;这里自定义图片预览的模板 结束&ndash;&gt;
        </div>
    </div>

   </div>
    <h5 class="page-header"></h5>-->

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-image" data-rule="required" class="form-control" size="50" name="row[image]" type="text" value="">
                <input id="rimage"  class="form-control hidden"  name="row[image_info]" type="text" value="">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-image" class="btn btn-danger faupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    <span><button type="button"  class="btn btn-primary btn-success"  onclick="addqr()" ><i class="fa fa-qrcode"></i>二维码</button></span>
            <!--        <span><button type="button"  class="btn btn-primary btn-success"  onclick="createPoster()" ><i class="fa fa-qrcode"></i>保存海报</button></span>-->
                </div>
                <span class="msg-box n-right" for="c-image" ></span>

            </div>
            <ul class="row list-inline faupload-preview" id="p-image" data-template="preview1tpl"></ul>
            <script id="preview1tpl" type="text/html">

                <li class="col-xs-12"><div id="poster-container"  style="position: absolute;"><img   class="poster"  style="width: 640px !important;" src="<%=fullurl%>" onerror="this.src=\'' + Fast.api.fixurl("ajax/icon") + '?suffix=<%=suffix%>\';this.onerror=null;" class="img-responsive"> </div>
                <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a></li>


            </script>


            <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
            <script src="__CDN__/assets/libs/html2canvas.min.js"></script>
            <script src="__CDN__/assets/libs/qrcode.min.js"></script>
            <script  type="text/javascript">
                   var share_url='霸屏同城';
               function addqr()
                {
                    $html='<div id="box" type="qr" index="2" style="width: 150px; height: 150px; cursor: move; position: absolute; top: 30px; left: 30px;"><div id="qr" style="width:100%" > <div style="width: 10px; height: 10px; overflow: hidden; cursor: se-resize; position: absolute; right: 0; bottom: 0; background-color: #09C;" id="coor"></div></div>';

                    if( $('.poster').length!==0&&$('#box').length===0) {
                         $('.poster').after($html);
                     }
                    var qrcode = new  QRCode(document.getElementById("qr"), {
                        text: share_url,
                        width:150,
                        height:150,
                        colorDark : "#000000",
                        colorLight : "#ffffff",
                        typeNumber:4,
                        correctLevel : QRCode.CorrectLevel.H
                    });
                    $('#qr').find('img').css('width','100%');

                    $(document).mousemove(function(e) {
                        if (!!this.move) {
                            var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix,
                                callback = document.call_down || function() {
                                    $(this.move_target).css({
                                        'top': e.pageY - posix.y,
                                        'left': e.pageX - posix.x
                                    });
                                };

                            callback.call(this, e, posix);
                        }
                    }).mouseup(function(e) {
                        if (!!this.move) {
                            var callback = document.call_up || function(){};
                            callback.call(this, e);
                            $.extend(this, {
                                'move': false,
                                'move_target': null,
                                'call_down': false,
                                'call_up': false
                            });
                        }
                    });

                    $('#box')[0].ondragstart=function () {	//很多浏览器中默认允许拖动图片到新标签页打开，要先禁止，否则影响效果。如果你要拖动的不是图片，可以去掉
                        return false;
                    };
                    $('.poster')[0].ondragstart=function () {
                        return false;
                    };


                    var $box = $('#box').mousedown(function(e) {
                        var offset = $(this).offset();
                        var foffset= $('.poster').offset();
                        console.log(offset)
                        console.log(foffset)
                        console.log(e.pageX)
                        this.posix = {'x': e.pageX - (offset.left-foffset.left), 'y': e.pageY - (offset.top-foffset.top)};
                        $.extend(document, {'move': true, 'move_target': this});
                    }).on('mousedown', '#coor', function(e) {
                        var posix = {
                            'w': $box.width(),
                            'h': $box.height(),
                            'x': e.pageX,
                            'y': e.pageY
                        };

                        $.extend(document, {'move': true, 'call_down': function(e) {
                                $box.css({
                                    'width': Math.max(30, e.pageX - posix.x + posix.w),
                                    'height': Math.max(30, e.pageY - posix.y + posix.h)
                                });
                                console.log(
                                    'width'+ Math.max(30, e.pageX - posix.x + posix.w)+
                                    'height'+Math.max(30, e.pageY - posix.y + posix.h)
                                );

                            }});
                        return false;
                    });

                }
               function createPoster() {
                   //console.log("生成图片");
                   if($('#box').length!=0) {
                       let rimage = {
                           share:share_url,
                           width: $('#box').css('width'),
                           height: $('#box').css('height'),
                           top: $('#box').css('top'),
                           left: $('#box').css('left')
                       };

                       $('#rimage').val(JSON.stringify(rimage));
                       /* html2canvas(document.querySelector("#poster-container"),{useCORS: true,allowTaint:true,y: document.querySelector("#poster-container").getBoundingClientRect().top + window.scrollY}).then(canvas => {
                       var imgUrl = canvas.toDataURL("image/png");
                       $('#rimage').val(imgUrl);
                   });*/
                   }
               }


            </script>



        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled" >{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
